@import "../../../stylesheet/default.scss";
@import "../../../stylesheet/mixin.scss";
@import "../../../stylesheet/color/gradientColor.scss";

$prefix: m-message;

#m_message_container{
	position: fixed;
	top: $message-top;left: 50%;
	z-index: $message-level;
	@include flex_vertical;
}

.#{$prefix}-default{
	padding: $message-padding;
	margin-bottom: 10px;
	will-change: transform;
	box-shadow:$message-shadow;
	@include opacity($message-opacity);
	@include transform(translateY($message-trans));
	@include transition(transform 400ms ease);
	@include flex_vertical;
	@extend .m-gradients-CloudyKnoxville;
	@include animation(messageAppear 500ms ease);

	.#{$prefix}-content{
		font-size: 16px;
		word-break: break-all;
	}
}

@keyframes messageAppear{
	from{
		@include transform(translateY(0px));
	}to{
		@include transform(translateY($message-trans));
	}
}
